<template>
  <div id="OrderDetail" :style="{minHeight: currHeight + 'px'}">
    <!-- 导航栏 -->
    <van-nav-bar title="我的订单" left-text="返回" left-arrow
        @click-left="onClickLeft"
             @click-right="onClickRight"
    >
      <van-icon name="ellipsis" slot="right" />
    </van-nav-bar>
    <!-- 内容 -->
    <div class="content">
<!--              订单状态                  -->
        <div class=content_title>
            <div class="order_status">
                <p class="state">订单状态:<span class="deliver_good">已发货</span></p>
                <p class="odd_number">订单单号:<span class="coding">1000800245</span></p>
                <p class="order_price">订单金额:<span class="money">￥2000.00</span></p>
            </div>
            <div class="content_title_right">
                <img src="../assets/images/我的私享卡/icon.png" class="order_pho">   
                <p class="content_title_right_word">确认收货</p> 
            </div>
        </div>
<!--           商品介绍                -->
        <div class="shop">
            <div>
                <img src="../assets/images/我的订单/pic_1.png" class="shop_pho">
            </div>
            <div>
                <p class="shop_name">春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长</p>
                <p class="shop_price">￥<span class="shop_num">2000.00</span></p>
            </div>
            <div class="shop_ride">
                ×<span class="shop_count">1</span>
            </div>
        </div>
<!--              地址            -->
        <div class="first_site" 
        v-for="(item,index) in lists"
        :key="index">
            <div class="active"></div>
            <img src="../assets/images/我的订单/icon_1.png" class="site_logo">
            <p class="site_name">{{item.name}}<span class="phone">{{item.phone}}</span></p>
            <p class="specific_address">{{item.site}}</p>
        </div>
<!--              支付方式            -->
        <div class="payment">
            <div class="payment_title">
                <p class="mode_payment">支付方式</p>
                <p class="WeChat">微信支付</p>
            </div>
            <div class="payment_title">
                <p class="mode_payment">配送方式</p>
                <p class="WeChat">快递</p>
            </div>
            <p class="workday">工作日、双休日与假日均可送货</p>

        </div>
<!--             测量尺寸             -->
        <router-link to="/neck">
        <div class="measurement">
            <p class="size">测量尺寸</p>
            <router-link to='/NotSize'>
                <div class="measurement_right">
                    <img src="../assets/images/我的订单/icon.png" class="arrows">
                </div>
            </router-link>
        </div>
        </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Orderall',
  data () {
    return {
        active: 2,
        lists:[{
            index:1,
            name:"李先生",
            phone:"13423433424",
            site:"广东省佛山市禅城区印象购物中心5号楼1902室"
        }
        ],
        currHeight:''
    }
  },
   methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
  },
    mounted(){
    this.currHeight = document.documentElement.clientHeight
    window.onresize = () => {
      this.currHeight = document.documentElement.clientHeight     
    }
  } 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
#OrderDetail{
    background-color: #eeeeee;
}
.content{ 
    width:100%;
    box-sizing: border-box;
    padding-top:90px;
    .content_title{
        width:100%;
        height:188px;
        background: url(../assets/images/限时特惠/background.png) no-repeat;
        background-size: 100% 100%;
    }
    .order_status{
        float:left;
        margin-top:22px;
        margin-left:20px;
    }
    .state{
        font-size: 28px;
        color:#666666;
    }
    .deliver_good{
        font-size: 28px;
        color:#ff4242;
    }
    .odd_number{
        font-size: 28px;
        color:#666666;
        margin-top:10px;
    }
    .coding{
        font-size: 28px;
        color:#666666;  
    }
    .order_price{
        font-size: 28px;
        color:#666666;         
    }
    .money{
        font-size: 28px;
        color:#234497;   
    }
    .content_title_right{
        margin-top:40px;
        float: right;
    }
    .order_pho{
        margin-left: 10px;
        width:40%;
    }
    .content_title_right_word{
        font-size: 28px;
        margin-left: 10px;
        color:#234497;
        margin-top: -50px;
    }
    .shop{
        width:100%;
        height: 185px;
        display: flex;
        background:#ffffff;
        margin-top:20px;
        justify-content:space-between;
    }
    .shop_pho{
        margin-top:30px;
        margin-left: 50px;
        width:50%;
    }
    .shop_price{
        font-size:24px;
        margin-right: 50px;
    }
    .shop_name{
        margin-top:30px;
        font-size:24px;
        margin-right: 50px;
    }
    .shop_num{
        font-size:36px;
    }
    .shop_ride{
        margin-top:30px;
        font-size: 24px;
        margin-right: 10px;
    }
    .shop_count{
        font-size: 30px;
    }
    .first_site{
        width:100%;
        height:170px;
        background-color: #ffffff;
        margin-top: 20px;
        .active{
            width:10px;
            height:170px;
            background-color: #234497;
            float: left;
        }
        .site_logo{
            width:5%;
            float:left;
            margin-top: 70px;
            margin-left: 20px;
        }
        .site_name{
            width:50%;
            font-size:30px;
            box-sizing: border-box;
            padding-top: 20px;
            margin-left: 30px;
            float:left;
        }
        .phone{
            font-size:30px; 
            margin-left:23px; 
        }
        .specific_address{
            width:70%;
            margin-left: 30px;
            font-size: 24px;
            float:left;
        }
    }
    .payment{
        width:100%;
        height:174px;
        background-color: #ffffff;
        margin-top: 20px;
        .payment_title{
            margin:0 auto;
            width:90%;
            display: flex;
            justify-content:space-between;
            box-sizing: border-box;
            padding-top: 10px;
        }
        .mode_payment{
            font-size:28px;
        }
        .WeChat{
            font-size: 28px;
            color:#234497;
        }
        .workday{
            font-size: 28px;
            margin-left: 40px;
            color:#999999;
        }
    }
    .measurement{
        width:100%;
        height:100px;
        background-color: #ffffff;
        margin-top: 20px;
        display: flex;
        justify-content:space-between;
        .size{
            font-size: 28px;
            margin-left: 30px;
            line-height: 100px;
            color:#333333;
        }
        .measurement_right{
            margin-right: 30px;
        }
        .arrows{
            width:100%;

        }
    }
}
</style>
